<template>
  <el-form v-model="logForm">
    <el-form-item prop="logid">
      <el-input v-model="logForm.logid" placeholder="用户名" />
    </el-form-item>
    <el-form-item prop="logpwd">
      <el-input type="password" v-model="logForm.logpwd" placeholder="密码" />
    </el-form-item>
    <div>
      <el-button class="container" :disabled="isLoading" @click="handleLogin">登录</el-button>
    </div>
  </el-form>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores/user.js'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { logForm } = storeToRefs(userStore)

const handleLogin = () => {
  userStore.glogin()
}

const isLoading = computed(() => userStore.isLoading)
</script>

<style scoped>
.container {
  width: 100%;
  height: 35px;
  background: rgb(13, 16, 214);
  color: #ffffff;
  border: none;
  outline: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  padding: 10px;
}
</style>
